<template>
	<view>
		<view>
			<BannerList :bannerList="imgList" @tapBanner ='tapBanner'></BannerList>
		</view>
		<u-sticky bgColor="#000">
		<u-tabs :list="tabLIst1" :current='current' @click="tabclick" keyName='typeName' lineColor='#fff' :activeStyle="{color:'#fff'}"></u-tabs>
			</u-sticky >
		<view>
		
			<view class='event' v-for='(item,index) in eventList' :key='index' :id="item.id" @click='tapDetail'
				:data-type='item.competitionType' :data-id='item.id'>
				<view class='event-head'>
					<swiper class="banner" indicator-dots="true" circular="true" autoplay="true" duration="1000"
						indicator-color="#a7a7a7" indicator-active-color="#e8565c">
						<block v-for='(its,ids) in item.url' :key='ids'>
							<swiper-item id="ids"  class='swiper'>
								<image class="banner_img" :src="its"></image>
							</swiper-item>
						</block>

					</swiper>
				</view>
				<view class='hotm'>{{item.competitionName}}</view>
				<view class='hotm'>
					<view class='hotname'>
						<view class='hotre'>
							<image src='/static/din.png'></image>
						</view>
						<text>{{item.areaAddress}}</text>
					</view>
					<view class='hot' v-if='item.competitionStatus == 0'>

						<text class='sta'>未开始</text>
					</view>

					<view class='hot' v-else-if='item.competitionStatus == 1'>
						<view class='hotre'>
							<image src='/static/hot.png'></image>
						</view>
						<text>火热进行中</text>
					</view>
					<view class='hot' v-else-if='item.competitionStatus == 2'>
						<text class='end'>已结束</text>
					</view>
				</view>
			</view>
		</view>

         <view class='h-top' @click='sumb'>
            <view class='h-ckeii'>申请赛事</view>
          </view>
	</view>
</template>

<script>
	import BannerList from '@/components/bannerList/bannerList.vue';
	import {
		getCompetititonTypeApi,
		getCompetititonListApi,
		getToken,
		getBannerListApi,
	} from '@/config/api.js';
	import {
		dateCompare
	} from "@/config/fomData.js"
	export default {
		components: {
			BannerList,
		},
		data() {
			return {
				swiperList: [],
				imgList:[],
				tabPlayerList: [
					'选手列表',
					'节目排行榜'
				],
				current: 0,
				typeId: '',
				pageNum:1,
				tabLIst1: [],
				eventList: [],
			};
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				this.getType()
				this.getBanner()
			}else{
				getToken().then(res=>{
					this.getType()
				})
			}
			console.log(this.$store.state)
			
		},
		methods: {
			tapBanner(e){
				console.log(e)
				uni.navigateTo({
					url:e.skipUrl
				})
			},
			getType() {
				getCompetititonTypeApi().then(res => {
					this.tabLIst1 = res
					this.typeId = res[0].id
					this.getList()
				})
			},
			getBanner(){
				getBannerListApi().then(res=>{
					 this.swiperList = res
					 this.imgList = res.map(i=>{
						 
						i.img =  i.imgUrl
						return i
						 })
				})
			},
			sumb(){
			   uni.navigateTo({
			   	url:'/pages/apply/event/event'
			   })	
			},
			getList() {
				getCompetititonListApi({
					pageNum: this.pageNum,
                    competitionType:this.typeId
				}).then(res => {
					if(res.records.length >0){
						res.records.map(item => {
							item.url = item.competitionImgUrl.split(',')
							// if(dateCompare(item.startTime)< 0 ){
							//  item.status = 
							// }
						})
						this.eventList.push(...res.records)
					}
				})
			},
			tapDetail(e){
				let id = e.currentTarget.id
				uni.navigateTo({
					url:'/pages/home/home/homeDetail?id=' + id,
				})
			},
			tabclick(e) {
				this.current = e.index
				this.typeId = e.id
				this.eventList =[]
				this.pageNum =1
				
				this.getList()
			},

		},
		onReachBottom() {
			this.pageNum++
			this.getList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.event {
		margin-top: 20rpx;
		width: 100%;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		background: #000;
	}

	.event-head {
		width: 100%;
		height: 350rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.event-head image {
		width: 100%;
		height: 100%;
	}

	.banner {
		width: 100%;
		height: 350rpx;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.hotm {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.hotname {
		width: 520rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hotre {
		display: inline-block;
		margin-right: 10rpx;
	}

	.hotre image {
		width: 17rpx;
		height: 24rpx;
	}

	.hot {
		color: $uni-color-primary;
	}

	.sta {
		color: #000;
	}

	.end {
		color: #A6A6A6;
	}
	.h-top{
	  position: fixed;
	  bottom: 130rpx;
	  right:20rpx;
	  width: 192rpx;
	  height: 82rpx;
	  text-align: center;
	  background: $uni-color-primary;
	  line-height: 82rpx;
	  color: #fff;
	  border-radius: 50rpx;
	  z-index: 999;
	}
</style>
